<template>
  <div ref="appRef" class="my-container-box">
    <page-header>
      <div v-permission="{ action: 'changeDepart' }" class="btn" @click="handleChangeDpt()">
        <i class="iconfont icon-erji-suoyouqianyi"></i>部门迁移
      </div>
      <div v-permission="{ action: 'add' }" class="btn" @click="handleAdd()">
        <i class="iconfont icon-xinzeng1"></i>新增
      </div>
    </page-header>
    <search-top-form
      class="search-form"
      :search-form="searchObj.searchForm"
      :search-item="searchObj.searchItem"
      @handle-search="handleSearch"
      @handle-reset="handleReset"
      @re-count-table-height="getTableHeight"
    ></search-top-form>
    <table-page-content
      :loading="tableObj.loading"
      :table-data="tableObj.tableList"
      :table-headers="tableHeaders"
      :table-height="tableHeight"
      :page-config="searchObj.pageConfig"
      @page-size-change="pageSizeChange"
      @current-page-change="currentPageChange"
    >
      <template #areaCode="{ row }">
        {{ spliceCodeName(row.areaCode, row.areaCodeDescr) }}
      </template>
      <template #operate="{ row }">
        <div class="table-btn-box">
          <el-button v-permission="{ action: 'detail' }" link @click="handleDetail(row.userId)"
            ><span class="text">详情</span></el-button
          >
          <el-button v-permission="{ action: 'edit' }" link @click="handleAdd(row.id, row.userId)"
            ><span class="text">编辑</span></el-button
          >
          <el-button v-permission="{ action: 'remove' }" link @click="handleDel(row.userId)"
            ><span class="text">删除</span></el-button
          >
          <el-button v-permission="{ action: 'resetPassword' }" link @click="handleResetPwd(row.userId)"
            ><span class="text">重置密码</span></el-button
          >
        </div>
      </template>
    </table-page-content>
    <add-component
      ref="addRef"
      :user-type-list="userTypeDics"
      :area-code-list="searchObj.searchItem[4].children"
      :department-list="searchObj.searchItem[3].children"
      :professional-titles-list="tableObj.professionalTitlesList"
      @handle-added="getList"
    ></add-component>
    <detail-component ref="detailRef"></detail-component>
    <change-component
      ref="changeRef"
      :department-list="searchObj.searchItem[3].children"
      @handle-added="getList"
    ></change-component>
  </div>
</template>

<script lang="ts" setup name="User">
import { useProxy } from '@/utils/proxy'
import { useTableHeight } from '@/hooks/tableHeight'
import { pageConfig } from '@/utils/config'
import { tableHeaders, searchItem } from './config'
import { getUserList, deleteUser, resetPwdById } from './api'
import { userTypeDics, DicsObj, getDicsList } from '@/hooks/dicsData'
import { getSystemParams } from '@/utils/config'
import { spliceCodeName } from '@/utils/index'
import useUserStore from '@/store/modules/user'
import addComponent from './components/add.vue'
import detailComponent from './components/detail.vue'
import changeComponent from './components/change.vue'
const userStore = useUserStore()
const { appRef, getTableHeight, tableHeight } = useTableHeight()
const { proxy } = useProxy()
const addRef = ref()
const detailRef = ref()
const changeRef = ref()
// 搜索对象
const searchObj = reactive({
  searchForm: { userName: null, employeeId: null, phone: null, department: null, areaCode: null },
  pageConfig: { ...pageConfig },
  searchItem
})
const tableObj = reactive({
  loading: false,
  professionalTitlesList: [],
  tableList: []
})
// 搜索
const handleSearch = () => {
  searchObj.pageConfig.pageIndex = 1
  getList()
}
const handleReset = () => {
  searchObj.searchForm = { userName: null, employeeId: null, phone: null, department: null, areaCode: null }
  handleSearch()
}
// 获取列表数据
const getList = () => {
  tableObj.loading = true
  tableObj.tableList = []
  getUserList<any>({
    ...searchObj.searchForm,
    ...searchObj.pageConfig
  })
    .then((res) => {
      tableObj.tableList = res.data
      searchObj.pageConfig.total = res.total
      tableObj.loading = false
    })
    .catch(() => {
      tableObj.loading = false
    })
}
// 表格切换page-size
const pageSizeChange = (val: number) => {
  searchObj.pageConfig.pageSize = val
  searchObj.pageConfig.pageIndex = 1
  getList()
}
// 切换分页
const currentPageChange = (val: number) => {
  searchObj.pageConfig.pageIndex = val
  getList()
}
// 新增/编辑
const handleAdd = (id?: string, userId?: string) => {
  if (id) {
    addRef.value.state.userId = userId
    addRef.value.getRoleDetail()
  }
  addRef.value.state.show = true
}
//重置密码
const handleResetPwd = (id: string) => {
  let length = getSystemParams('002')
  proxy.$message.confirm('确定要将密码修改成初始密码吗？').then(async () => {
    await resetPwdById(id)
    proxy.$message.msgSuccess(`重置密码成功,初始密码为${length || 8}个0`)
    if (userStore.userInfo.userId == id) {
      userStore.loginOut()
      setTimeout(() => {
        proxy.$router.replace('/login')
      }, 500)
    } else {
      getList()
    }
  })
}
// 部门迁移
const handleChangeDpt = () => {
  changeRef.value.state.show = true
}
// 删除
const handleDel = (id: string) => {
  proxy.$message.confirm('角色删除后，将无法恢复，请确认是否删除该用户?').then(async () => {
    await deleteUser(id)
    proxy.$message.msgSuccess('删除成功')
    getList()
  })
}
// 查看详情
const handleDetail = (id: string) => {
  detailRef.value.state.userId = id
  detailRef.value.getRoleDetail()
  detailRef.value.state.show = true
}
const init = () => {
  getDicsList(DicsObj.areaCode).then((res: any) => {
    searchObj.searchItem[4].children = res
  })
  getDicsList(DicsObj.department).then((res: any) => {
    searchObj.searchItem[3].children = res
  })
  getDicsList(DicsObj.professionalTitles).then((res: any) => {
    tableObj.professionalTitlesList = res
  })
  getList()
}
init()
</script>

<style lang="scss" scoped></style>
